<template>
  <!-- 控制台 -->
  <block-components :msg="msg" />

  <!-- 项目概括 -->
  <div class="flex_space-bt">
    <nav-tabs-com
      v-for="item in navList"
      :key="item"
      :itemInfo="item"
      @click="retourPushHandler(item)"
    />
  </div>

  <!-- 主体内容 前-后分栏 -->
  <div class="left_to_right">
    <div class="toLeft">

      <!-- 我的任务 -->
      <block-components :msg="my_task" />
      <div class="my_task_main">
        <my-task-com :myTaskList="myTaskList"/>
      </div>

      <!-- 我参与的项目 -->
      <block-components :msg="my_project"/>

      <!-- 我的项目 -->
      <my-project-com :myProjectList="myProjectList"/>

    </div>
    <div class="toRight">
      <!-- 待办事项 -->
      <block-components :msg="my_toDoList"/>

      <!-- 待办日历 -->
      <calendar-and-todolist
        :nowDate="nowDate"
        :taskAndprojectList="toDoList"
        @nowDate="todoListHandler"
      />
    </div>
  </div>
</template>

<script setup>
import BlockComponents from '@/components/block_components/index.vue'
import NavTabsCom from './components/nav_tabs.vue' //tab分栏
import MyTaskCom from './components/my_task.vue' //我的任务
import CalendarAndTodolist from './components/calendar_and_todoList.vue' //日历+待办
import MyProjectCom from './components/my_project.vue'
import { onMounted, reactive, ref } from 'vue'
import { homeApi, homeToDoPage } from '@/api/project'
import { useRoute, useRouter } from 'vue-router';

let route = useRoute()
let router = useRouter()
const msg = ref('项目概览')
const my_task = ref('我的任务')
const my_project = ref('我参与的项目')
const my_toDoList = ref('待办工作细项')
//当前日历时间
let nowDate = reactive(new Date())
const navList = ref([
  {
    title: '全部项目',
    num: '0',
    svgUrl: 'project_assets'
  },
  {
    title: '进行中的项目',
    num: '0',
    svgUrl: 'project_card'
  },
  {
    title: '逾期任务数',
    num: '0',
    svgUrl: 'project_overdue'
  },
  {
    title: '进行中的任务',
    num: '0',
    svgUrl: 'project_task'
  }
])

const myTaskList = ref([
  {
    title: '未开始',
    type: '1',
    color: '#666CF6', //颜色
    bgc: '#F9F9FF', //背景色
    list: [
      {
        name: 'EPC模式审批-经发局',
        planEndTime: '',
        overdueStatus: '',
        taskName: ''
      },
      {
        name: 'EPC模式审批-经发局',
        planEndTime: '',
        overdueStatus: '',
        taskName: ''
      }
    ] // 未开始的任务列表
  },
  {
    title: '进行中',
    type: '2',
    color: '#FC7018', //颜色
    bgc: '#FFF9F5', //背景色
    list: [
      {
        name: 'EPC模式审批-经发局',
        planEndTime: '',
        overdueStatus: '',
        taskName: ''
      }
    ] // 进行中的任务列表
  },
  {
    title: '已完成',
    type: '3',
    color: '#28ABFF', //颜色
    bgc: '#E9F6FE', //背景色
    list: [
      {
        name: 'EPC模式审批-经发局',
        planEndTime: '',
        overdueStatus: '',
        taskName: ''
      }
    ] // 已完成的任务列表
  }
])

const myProjectList = ref([])

const retourPushHandler = (item) => {
  router.push('/constructionProjectManage/project_mt/index')
}

//我的任务
const getUserTask = () => {
  homeApi.getUserTask({type:3}).then((res) => {
    const { data, code, msg } = res
    if (code === '200') {
      myTaskList.value[0].list = data.notStartTasks || [] //未开始
      myTaskList.value[1].list = data.ongoingTasks || [] //进行中
      myTaskList.value[2].list = data.completedTasks || [] //已完成
    }
  })
}

//我的项目
const getUserProject = () => {
  homeApi.getUserProject({type:3}).then((res) => {
    const { data, code, msg } = res
    if (code === '200') {
      myProjectList.value = data
    }
  })
}
//项目概览
const getOverviewStatistics = () => {
  homeApi.getOverviewStatistics({type:3}).then((res) => {
    // console.log(res);
    const { data, msg, code } = res
    if (code === '200') {
      navList.value[0].num = data.projectNum
      navList.value[1].num = data.ongoingProjectNum
      navList.value[2].num = data.overdueTaskNum
      navList.value[3].num = data.ongoingTaskNum
    }
    //     projectNum	integer($int32)
    // 全部项目数量

    // ongoingProjectNum	integer($int32)
    // 进行中项目数量

    // ongoingTaskNum	integer($int32)
    // 进行中任务数量

    // overdueTaskNum	integer($int32)
    // 逾期任务数量
  })
}
//获取当前服务器日期时间
const getNowTime = () => {
  homeApi.getNowTime({type:3}).then((res) => {
    let { data, code, msg } = res
    if (code === '200') {
      let str = data
      nowDate = new Date(str.split(' ')[0])
    }
  })
}
const toDoList = ref([])

//转换时间为yyyy-MM-dd补0


const formatDate = (date) => {
  let year = date.getFullYear()
  let month = date.getMonth() + 1
  let day = date.getDate()

  return `${year}-${month}-${day}`
}
//获取待办事项
const todoListHandler = (nowDate=new Date()) => {
  homeToDoPage.gerToDoList({date:formatDate(nowDate),type:3}).then((res) => {
    toDoList.value = res?.data || []
  })
}
onMounted(() => {
  //我的任务
  getUserTask()
  getUserProject()
  getOverviewStatistics()
  getNowTime()
  //获取待办
  todoListHandler()
})
</script>

<style lang="scss" scoped>
.flex_space-bt {
  display: flex;
  margin-top: 26px;
  margin-bottom: 26px;
  justify-content: space-between;
}
.left_to_right {
  display: flex;
  justify-content: space-between;
  .toLeft {
    display: flex;
    width: 68%;
    flex-direction: column;
  }
  .toRight {
    width: 30%;
  }
}
.my_task_main {
  margin-top: 26px;
  margin-bottom: 26px;
}
</style>
